<template>
    <div>
        <div class="index">
            <h2><i class="el-icon-s-data"></i>数据统计</h2>
            <!-- 搜索 -->
            <el-form :inline="true" style="margin-top: 20px;">
                <el-form-item>
                    <el-input size="small" v-model="local" placeholder="请输入地区"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select size="small" v-model="siteId" placeholder="请选择站点名称">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-date-picker size="small" v-model="range" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" icon="el-icon-search" @click="chongzhi">重置</el-button>
                </el-form-item>
            </el-form>
            <div class="index-nav">
                <ul>
                    <li>
                        充电桩总数
                        <span>{{ CountCDZ }}</span>
                    </li>
                    <!-- <li>
                        维修中数量
                        <span>{{ CountWXZ }}</span>
                    </li> -->
                    <li>
                        待维修数量
                        <span>{{ CountDWX }}</span>
                    </li>
                    <li>
                        场地数
                        <span>{{ CountCDS }}</span>
                    </li>
                    <li>
                        设备数
                        <span>{{ CountSBS }}</span>
                    </li>
                    <li>
                        充电端口数
                        <span>{{ CountCDDK }}</span>
                    </li>
                    <li>
                        今日收益
                        <span>{{ Counttoday / 10000 }}</span>
                    </li>
                    <li>
                        本月收益
                        <span>{{ Countmonth / 10000 }}</span>
                    </li>
                    <li>
                        用户总数
                        <span>{{ Countuser }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getAdminData,
    getAdminStationData,
    getAdminSiteList
} from "../../api/userMG";
export default {
    data() {
        return {
            CountCDZ: '',
            CountWXZ: '',
            CountDWX: '',
            CountCDS: '',
            CountSBS: '',
            CountCDDK: '',
            Counttoday: '',
            Countmonth: '',
            Countuser: '',
            options: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            local: '',
            startTime: '',
            endTime: '',
            siteId: '',
            range: [],
            timestamp: '',
            timestampv: ''
        }
    },
    created() {
        this.getShuju()
        this.gteSite()
    },
    watch: {
        range(newRange) {
            this.startTime = newRange[0];
            this.endTime = newRange[1];
        }
    },
    methods: {
        // 搜索数据
        search() {
            if (this.startTime != '') {
                this.timestamp = Math.floor(new Date(this.startTime).getTime() / 1000)
            } if (this.endTime != '') {
                this.timestampv = Math.floor(new Date(this.endTime).getTime() / 1000)
            }
            this.getShuju()
        },
        // 重置数据
        chongzhi() {
            this.local = ''
            this.siteId = ''
            this.startTime = ''
            this.timestamp = ''
            this.endTime = ''
            this.timestampv = ''
            this.range = ''
            this.getShuju()
        },
        // 获取站点列表
        gteSite() {
            getAdminSiteList().then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    res.data.list.forEach((item) => {
                        this.options.push({ label: item.name, value: item.id })
                    })
                    return;
                }
            })
        },
        // 获取数据
        getShuju() {
            this.loading = true;
            var parameter = {
                local: this.local,
                startTime: this.timestamp,
                endTime: this.timestampv,
                siteId: this.siteId
            };
            getAdminStationData(parameter).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.CountCDZ = res.data.stationCount;
                    // this.CountWXZ = res.data.;
                    this.CountDWX = res.data.failureStationCount;
                    return;
                }
            })
            getAdminData(parameter).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.CountCDS = res.data.siteCount;
                    this.CountSBS = res.data.stationCount;
                    this.CountCDDK = res.data.portCount;
                    this.Counttoday = res.data.todayCount;
                    this.Countmonth = res.data.monthCount;
                    this.Countuser = res.data.userCount;
                    return;
                }
            })
        },
    }
}
</script>

<style>
.index-nav {
    display: flex;
}

.index-nav ul {
    display: flex;
    width: 90%;
    flex-wrap: wrap;
}

.index-nav ul li {
    margin-top: 10px;
    list-style: none;
    width: 180px;
    height: 90px;
    border: 1px solid rgb(234, 234, 234);
    margin-right: 10px;
    border-radius: 10px;
    padding: 14px;
}

.index-nav ul li span {
    display: block;
    font-size: 28px;
    margin-top: 30px;
    margin-left: 10px;
    color: rgb(58, 150, 255);
}
</style>